<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简化版弹球游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .game-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        canvas {
            border: 3px solid #333;
            border-radius: 10px;
            background: #000;
            display: block;
            margin: 0 auto;
        }

        .controls {
            margin-top: 20px;
        }

        button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: linear-gradient(45deg, #4CAF50, #45a049);
            color: white;
        }

        .btn-secondary {
            background: linear-gradient(45deg, #2196F3, #1976D2);
            color: white;
        }

        .btn-danger {
            background: linear-gradient(45deg, #f44336, #d32f2f);
            color: white;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .score {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin: 10px 0;
        }

        .instructions {
            background: rgba(102, 126, 234, 0.1);
            padding: 15px;
            border-radius: 10px;
            margin: 20px 0;
            text-align: left;
        }

        .instructions h3 {
            color: #667eea;
            margin-top: 0;
        }
    </style>
</head>

<body>
    <div class="game-container">
        <h1>🎮 简化版弹球游戏</h1>

        <canvas id="gameCanvas" width="800" height="600"></canvas>

        <div class="score">
            玩家1: <span id="player1-score">0</span> |
            玩家2: <span id="player2-score">0</span>
        </div>

        <div class="controls">
            <button id="start-btn" class="btn-primary">开始游戏</button>
            <button id="pause-btn" class="btn-secondary">暂停</button>
            <button id="reset-btn" class="btn-danger">重置</button>
        </div>

        <div class="instructions">
            <h3>游戏控制：</h3>
            <p><strong>玩家1 (左侧):</strong> W键向上，S键向下</p>
            <p><strong>玩家2 (右侧):</strong> ↑键向上，↓键向下</p>
            <p><strong>空格键:</strong> 暂停/恢复游戏</p>
        </div>
    </div>

    <script>
        // 简化版弹球游戏
        class SimplePongGame {
            constructor(canvas) {
                this.canvas = canvas;
                this.ctx = canvas.getContext('2d');

                // 游戏配置
                this.paddleWidth = 15;
                this.paddleHeight = 100;
                this.ballSize = 10;
                this.ballSpeed = 5;
                this.paddleSpeed = 8;

                // 游戏状态
                this.isRunning = false;
                this.isPaused = false;
                this.player1Score = 0;
                this.player2Score = 0;

                // 初始化游戏对象
                this.initGameObjects();

                // 绑定事件
                this.bindEvents();

                // 开始游戏循环
                this.gameLoop();
            }

            initGameObjects() {
                const canvasWidth = this.canvas.width;
                const canvasHeight = this.canvas.height;

                // 初始化球拍
                this.paddle1 = {
                    x: 50,
                    y: canvasHeight / 2 - this.paddleHeight / 2,
                    width: this.paddleWidth,
                    height: this.paddleHeight,
                    speed: 0,
                    color: '#4CAF50'
                };

                this.paddle2 = {
                    x: canvasWidth - 50 - this.paddleWidth,
                    y: canvasHeight / 2 - this.paddleHeight / 2,
                    width: this.paddleWidth,
                    height: this.paddleHeight,
                    speed: 0,
                    color: '#2196F3'
                };

                // 初始化球
                this.ball = {
                    x: canvasWidth / 2,
                    y: canvasHeight / 2,
                    size: this.ballSize,
                    dx: this.ballSpeed,
                    dy: this.ballSpeed,
                    color: '#FFD700'
                };

                this.resetBall();
            }

            bindEvents() {
                // 键盘事件
                document.addEventListener('keydown', (e) => {
                    if (this.isPaused) return;

                    switch (e.code) {
                        case 'KeyW':
                            this.paddle1.speed = -this.paddleSpeed;
                            break;
                        case 'KeyS':
                            this.paddle1.speed = this.paddleSpeed;
                            break;
                        case 'ArrowUp':
                            this.paddle2.speed = -this.paddleSpeed;
                            break;
                        case 'ArrowDown':
                            this.paddle2.speed = this.paddleSpeed;
                            break;
                        case 'Space':
                            e.preventDefault();
                            this.togglePause();
                            break;
                    }
                });

                document.addEventListener('keyup', (e) => {
                    switch (e.code) {
                        case 'KeyW':
                        case 'KeyS':
                            this.paddle1.speed = 0;
                            break;
                        case 'ArrowUp':
                        case 'ArrowDown':
                            this.paddle2.speed = 0;
                            break;
                    }
                });

                // 按钮事件
                document.getElementById('start-btn').addEventListener('click', () => {
                    this.startGame();
                });

                document.getElementById('pause-btn').addEventListener('click', () => {
                    this.togglePause();
                });

                document.getElementById('reset-btn').addEventListener('click', () => {
                    this.resetGame();
                });
            }

            startGame() {
                this.isRunning = true;
                this.isPaused = false;
                this.resetBall();
                document.getElementById('start-btn').textContent = '重新开始';
                document.getElementById('pause-btn').disabled = false;
            }

            togglePause() {
                if (!this.isRunning) return;
                this.isPaused = !this.isPaused;
                document.getElementById('pause-btn').textContent = this.isPaused ? '恢复' : '暂停';
            }

            resetGame() {
                this.isRunning = false;
                this.isPaused = false;
                this.player1Score = 0;
                this.player2Score = 0;
                this.initGameObjects();
                this.updateScore();
                document.getElementById('start-btn').textContent = '开始游戏';
                document.getElementById('pause-btn').textContent = '暂停';
                document.getElementById('pause-btn').disabled = true;
            }

            resetBall() {
                this.ball.x = this.canvas.width / 2;
                this.ball.y = this.canvas.height / 2;
                const direction = Math.random() > 0.5 ? 1 : -1;
                this.ball.dx = this.ballSpeed * direction;
                this.ball.dy = (Math.random() - 0.5) * this.ballSpeed;
            }

            update() {
                if (this.isPaused || !this.isRunning) return;

                // 更新球拍位置
                this.paddle1.y += this.paddle1.speed;
                this.paddle1.y = Math.max(0, Math.min(this.canvas.height - this.paddle1.height, this.paddle1.y));

                this.paddle2.y += this.paddle2.speed;
                this.paddle2.y = Math.max(0, Math.min(this.canvas.height - this.paddle2.height, this.paddle2.y));

                // 更新球的位置
                this.ball.x += this.ball.dx;
                this.ball.y += this.ball.dy;

                // 检查球与墙壁的碰撞
                if (this.ball.y <= 0 || this.ball.y >= this.canvas.height - this.ball.size) {
                    this.ball.dy = -this.ball.dy;
                }

                // 检查球与球拍的碰撞
                this.checkPaddleCollision(this.paddle1);
                this.checkPaddleCollision(this.paddle2);

                // 检查得分
                if (this.ball.x <= 0) {
                    this.player2Score++;
                    this.handleScore();
                } else if (this.ball.x >= this.canvas.width - this.ball.size) {
                    this.player1Score++;
                    this.handleScore();
                }
            }

            checkPaddleCollision(paddle) {
                if (this.ball.x < paddle.x + paddle.width &&
                    this.ball.x + this.ball.size > paddle.x &&
                    this.ball.y < paddle.y + paddle.height &&
                    this.ball.y + this.ball.size > paddle.y) {

                    this.ball.dx = -this.ball.dx;
                    const hitPosition = (this.ball.y + this.ball.size / 2 - paddle.y) / paddle.height;
                    this.ball.dy = (hitPosition - 0.5) * this.ballSpeed * 2;
                }
            }

            handleScore() {
                this.resetBall();
                this.updateScore();

                // 检查游戏结束
                if (this.player1Score >= 11 || this.player2Score >= 11) {
                    this.isRunning = false;
                    const winner = this.player1Score >= 11 ? '玩家1' : '玩家2';
                    alert(`游戏结束！获胜者: ${winner}`);
                }
            }

            updateScore() {
                document.getElementById('player1-score').textContent = this.player1Score;
                document.getElementById('player2-score').textContent = this.player2Score;
            }

            render() {
                // 清空画布
                this.ctx.fillStyle = '#000';
                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

                // 绘制球拍
                this.drawPaddle(this.paddle1);
                this.drawPaddle(this.paddle2);

                // 绘制球
                this.drawBall();

                // 绘制中心线
                this.drawCenterLine();
            }

            drawPaddle(paddle) {
                this.ctx.fillStyle = paddle.color;
                this.ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);

                // 添加高光效果
                this.ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
                this.ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height / 2);
            }

            drawBall() {
                // 绘制球的阴影
                this.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
                this.ctx.beginPath();
                this.ctx.arc(this.ball.x + 2, this.ball.y + 2, this.ball.size, 0, Math.PI * 2);
                this.ctx.fill();

                // 绘制球
                this.ctx.fillStyle = this.ball.color;
                this.ctx.beginPath();
                this.ctx.arc(this.ball.x, this.ball.y, this.ball.size, 0, Math.PI * 2);
                this.ctx.fill();

                // 添加高光效果
                this.ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
                this.ctx.beginPath();
                this.ctx.arc(this.ball.x - 2, this.ball.y - 2, this.ball.size / 3, 0, Math.PI * 2);
                this.ctx.fill();
            }

            drawCenterLine() {
                const centerX = this.canvas.width / 2;
                this.ctx.strokeStyle = '#fff';
                this.ctx.lineWidth = 2;
                this.ctx.setLineDash([10, 10]);
                this.ctx.beginPath();
                this.ctx.moveTo(centerX, 0);
                this.ctx.lineTo(centerX, this.canvas.height);
                this.ctx.stroke();
                this.ctx.setLineDash([]);
            }

            gameLoop() {
                this.update();
                this.render();
                requestAnimationFrame(() => this.gameLoop());
            }
        }

        // 初始化游戏
        window.addEventListener('load', () => {
            const canvas = document.getElementById('gameCanvas');
            new SimplePongGame(canvas);
        });
    </script>
</body>

</html>